import React ,{ Component }from 'react';
import {Form, Input, Button, Card} from 'antd';
import { UserOutlined,LockOutlined } from '@ant-design/icons';
import './index.scss';
import {API_LIST} from "../../common/js/api";
import { connect } from 'react-redux';
import * as actionCreators from '../../store/actionCreators';
const sha512 = require('sha512');

const layout = {
    labelCol: { span: 0 },
    wrapperCol: { span: 24 },
};

const tailLayout = {
    wrapperCol: { offset: 0, span: 24 },
};

class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loginData : {
                loginName: '',
                password: '',
                loading: false
            }
        }
    }

    componentDidMount() {

    }

    login = (data) => {
        this.request({
            url: API_LIST.login,
            tip: true,
            data: {
                loginName: data.loginName,
                password: sha512(data.password)
            },
            callback: (data) => {
                this.props.setLoginUser(data);
                this.props.history.push('/index');
                console.log(this.props.loginUser)
            },
            error: (data) => {
                console.log(data)
            }
        });
    }

    render() {
        const onFinish = values => {
            console.log('Success:', values);
            this.login(values);
        };

        const onFinishFailed = errorInfo => {
            console.log('Failed:', errorInfo);
        };

        return (
            <div className="login">
                <Card className="login-panel" title="欢迎登录!" style={{ width: 300 }}>
                    <Form
                        {...layout}
                        name="basic"
                        initialValues={this.state.loginData}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}>
                        <Form.Item
                            name="loginName"
                            rules={[{ required: true, message: '请输入用户名!' }]}>
                            <Input prefix={<UserOutlined/>} placeholder="请输入用户名"/>
                        </Form.Item>
                        <Form.Item
                            name="password"
                            rules={[{ required: true, message: '请输入密码!' }]}>
                            <Input.Password prefix={<LockOutlined />} placeholder="请输入密码"/>
                        </Form.Item>
                        <Form.Item {...tailLayout}>
                            <Button type="primary" htmlType="submit" block>
                                登 录
                            </Button>
                        </Form.Item>
                    </Form>
                </Card>
            </div>
        );
    }
}
const mapStateToProps = (state) => {
    return {
        loginUser: state.get('loginUser')
    }
}

const mapDispatchToProps = (dispatch) => ({
    setLoginUser(data) {
        const action = actionCreators.getLoginUser(data);
        dispatch(action);
    }
})
export default connect(mapStateToProps,mapDispatchToProps)(Index)
